<template>
	<n-collapse-item title="组件交互" name="1">
		<template #header-extra>
			<n-button type="primary" tertiary size="small" @click.stop="evAddEventsFn">
				<template #icon>
					<n-icon>
						<add />
					</n-icon>
				</template>
				新增
			</n-button>
		</template>

		<!-- 无数据 -->
		<div v-if="!orgConfig.events.interactEvents.length" class="no-data flex-center">
			<img src="@/assets/img/canvas/noData.png" alt="暂无数据" />
			<n-text :depth="3">暂无内容</n-text>
		</div>

		<n-card
			v-for="(item, cardIndex) in orgConfig.events.interactEvents"
			:key="cardIndex"
			class="n-card-shallow"
			size="small"
		>
			<n-space justify="space-between">
				<n-text>关联组件 - {{ cardIndex + 1 }}</n-text>
				<n-button type="error" text size="small" @click="evDeleteEventsFn(cardIndex)">
					<template #icon>
						<n-icon>
							<close />
						</n-icon>
					</template>
				</n-button>
			</n-space>

			<n-divider style="margin: 10px 0" />

			<!-- <n-tag :bordered="false" type="primary"> 选择目标组件 </n-tag> -->

			<setting-item-box name="触发事件" :alone="true">
				<n-input-group>
					<my-select class="select-type-options" v-model="item.interactOn" :list="interactActions" />
				</n-input-group>
			</setting-item-box>

			<setting-item-box :alone="true">
				<template #name>
					<n-text>绑定</n-text>
					<n-tooltip trigger="hover">
						<template #trigger>
							<n-icon size="21" :depth="3">
								<HelpCircleOutline />
							</n-icon>
						</template>
						<n-text>不支持「静态组件」支持「组件」「公共APi」</n-text>
					</n-tooltip>
				</template>
				<my-select
					class="select-type-options"
					filterable
					placeholder="仅展示符合条件的组件"
					v-model="item.interactComponentId"
					:list="fnEventsOptions()"
					:fileType="{ label: 'title', value: 'id' }"
				/>
			</setting-item-box>
			<DepartureBasicEvent v-model="item.interactFn" :id="item.interactComponentId" :interactOn="item.interactOn" />
		</n-card>
	</n-collapse-item>
</template>

<script setup>
import DepartureBasicEvent from './DepartureBasicEvent';

const { fetchTargetIndex } = $store.chart;
const componentList = toRef($store.chart.componentList);
const orgConfig = toRef($store.chart.getTargetData.orgConfig);
const targetID = toRef($store.chart.getTargetData.id);

// 获取组件交互事件列表
const interactActions = computed(() =>
	Object.entries(orgConfig.value.events.EventTypeName).map((item) => ({
		dictLabel: item[1],
		dictValue: item[0]
	}))
);

// 绑定组件列表
const fnEventsOptions = () => {
	// 扁平化树形数据
	const fnFlattern = (data) => {
		return data.reduce((iter, item) => {
			if (!item.isGroup && item.id !== targetID.value) {
				iter.push({
					id: item.id,
					title: item.title,
					disabled: false,
					type: 'componentList'
				});
			}
			return item.groupList && item.groupList.length > 0 ? [...iter, ...fnFlattern(item.groupList)] : iter;
		}, []);
	};

	return fnFlattern(componentList.value);
};

// 新增模块
const evAddEventsFn = () => {
	const itemObj = {
		interactOn: undefined,
		interactComponentId: undefined,
		interactFn: undefined
	};
	orgConfig.value.events.interactEvents.push(itemObj);
};

// 删除模块
const evDeleteEventsFn = (index) => {
	confirm('是否删除此关联交互模块').then(() => {
		let interFn = orgConfig.value.events.interactEvents[index].interactFn;
		if (interFn === 'customEvent') {
			let { interactComponentId: interCompId, interactOn: OnEvent } = orgConfig.value.events.interactEvents[index];
			const i = fetchTargetIndex(interCompId);
			// 删除被绑定的组件所绑定的代码段
			let isSuccess = Reflect.deleteProperty(
				componentList.value[i].orgConfig.events.interactHandler[targetID.value],
				OnEvent
			);
			if (
				isSuccess &&
				Object.keys(componentList.value[i].orgConfig.events.interactHandler[targetID.value]).length === 0
			) {
				Reflect.deleteProperty(componentList.value[i].orgConfig.events.interactHandler, targetID.value);
			}
		}
		orgConfig.value.events.interactEvents.splice(index, 1);

		msgSuccess('删除成功!');
	});
};
</script>

<style lang="scss" scoped>
.mill-chart-target-data {
	:deep(pre) {
		white-space: pre-wrap;
		word-wrap: break-word;
	}
}

.n-input-group {
	height: 30px;
}

.no-data {
	flex-direction: column;
	width: 100%;
	img {
		width: 120px;
	}
}

:deep(.n-base-selection .n-base-selection-label) {
	height: 32px;
}
</style>
